<!-- <template>
  <div>
    <el-input v-model="url" type="text" style="width: 20%" /> &nbsp; &nbsp;
    <el-button @click="join" type="primary">连接</el-button>
    <el-button @click="exit" type="danger">断开</el-button>

    <br />
    <el-input type="textarea" v-model="message" :rows="9" />
    <el-button type="info" @click="send">发送消息</el-button>
    <br />
    <br />
    <el-input type="textarea" v-model="text_content" :rows="9" /> 返回内容
    <br />
    <br />
  </div>
</template>

<script>
import { getInfo } from "../../../api/login";

export default {
  data() {
  return {
    url: "ws://127.0.0.1:8080/websocket/message", // 移除 {userID} 并放在后面动态赋值
    message: "",
    text_content: "",
    ws: null,
    userID: null,
  };
},
methods: {
  // 新增一个方法，用于获取用户信息并设置用户ID，这里要返回,不然可能是undefined
  getUserID() {
    return getInfo().then((response) => {
      // 将获取的用户ID存储到组件的数据中
      this.userID = response.user.userId;
      console.log("用户ID:", this.userID);
      return this.userID; // 返回用户ID
    }).catch((error) => {
      console.error("获取用户信息时出错:", error);
    });
  },
  join() {
    // 在调用 getUserID 方法后再连接 WebSocket
    this.getUserID().then((userID) => {
      // 连接 WebSocket，注意这里拼接 userID 到 url 上
      const wsuri = this.url + '/' + userID;
      this.ws = new WebSocket(wsuri);
      const self = this;
      this.ws.onopen = function (event) {
        self.text_content = self.text_content + "已经打开连接!" + "\n";
      };
      this.ws.onmessage = function (event) {
        self.text_content = event.data + "\n";
      };
      this.ws.onclose = function (event) {
        self.text_content = self.text_content + "已经关闭连接!" + "\n";
      };
    });
  },
  exit() {
    if (this.ws) {
      this.ws.close();
      this.ws = null;
    }
  },
  send() {
    if (this.ws) {
      this.ws.send(this.message);
    } else {
      alert("未连接到服务器");
    }
  },
}

};
</script> -->
<template>
  <div class="wrapper">
    <!-- 聊天室内容 -->
    <div class="container">
      <!-- 左侧显示在线人数和姓名 -->
      <div class="sidebar">
        <h2>在线人数: {{ onlineCount }}</h2>
        <ul>
          <li v-for="user in onlineUsers" :key="user.id">{{ user.name }}</li>
        </ul>
      </div>

      <!-- 中间发送消息区域 -->
      <div class="chat-area">
        <div class="message-list">
          <div v-for="(message, index) in messages" :key="index" class="message">{{ message }}</div>
        </div>
        <div class="message-input">
          <input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息..." />
          <button @click="sendMessage">发送</button>
        </div>
      </div>

      <!-- 右侧创建聊天室 -->
      <div class="create-chatroom">
        <h2>创建聊天室</h2>
        <input type="text" v-model="roomName" placeholder="聊天室名称" />
        <button @click="createChatroom">创建</button>
        <h3>参与人:</h3>
        <ul>
          <li v-for="participant in participants" :key="participant.id">{{ participant.name }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      onlineCount: 0,
      onlineUsers: [],
      roomName: '',
      participants: [],
      newMessage: '',
      messages: []
    };
  },
  created() {
    // WebSocket连接等...
  },
  methods: {
    createChatroom() {
      // 创建聊天室等...
    },
    sendMessage() {
      // 发送消息等...
    }
  }
};
</script>

<style scoped>
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 将容器设置为视口的高度，实现垂直居中 */
}

.container {
  display: flex;
  border: 1px solid #ccc;
}

.sidebar, .chat-area, .create-chatroom {
  flex: 1;
  padding: 10px;
}

.sidebar, .create-chatroom {
  border: 1px solid #ccc;
}

.message-list {
  height: 300px;
  overflow-y: auto;
}

.message {
  margin-bottom: 10px;
}

.message-input {
  margin-top: 10px;
}

.message-input input {
  width: calc(100% - 60px);
  padding: 5px;
  margin-right: 5px;
}

.message-input button {
  padding: 5px 10px;
}
</style>
